<template>
    <div class="tab-menu">
        <van-nav-bar
                title="客服中心"
                left-text="返回"
                left-arrow
                border
                fixed
                @click-left="$router.go(-1)"
        />
        <div style="height:50px"></div>
        <div class="tab-box">
            <div
                    v-for="(item, index) in routerArr"
                    :class="routerIndex == index ? 'avtice-tab' : ''"
                    :key="index"
            >
                <div @click="goUrl(index)" v-if="item.show">
                    {{ item.name }}
                </div>
            </div>
        </div>
        <router-view></router-view>
        <div style="height: 10vh;"></div>
<!--        <footer-item></footer-item>-->
    </div>
</template>

<script>
    import footerItem from "@/components/footer.vue";
    import headerItem from "@/components/header.vue";

    export default {
        name: "tabMenu",
        data() {
            return {
                routerArr: [
                    {
                        name: "保险",
                        routerUrl: "/callCenter/kfInsurance?index=0",
                        show: false
                    },
                    {
                        name: "财税",
                        routerUrl: "/callCenter/kfInsurance?index=1",
                        show: false
                    },
                    {
                        name: "人力资源",
                        routerUrl: "/callCenter/kfHuman?index=2",
                        show: false
                    },
                    {
                        name: "咨询类",
                        routerUrl: "callCenter/kfConsulting/kfConsulting?index=3",
                        show: false
                    },
                    {
                        name: "企业服务",
                        routerUrl: "callCenter/kfEnterpriseService/kfEnterpriseService?index=4",
                        show: false
                    }
                ],
                routerIndex: 0,
                menuList: [
                    "Customer/insurance", // 客服中心 -> 保险
                    "Customer/finance", // 客服中心 -> 财税
                    "Customer/hr", // 客服中心 ->人力
                    "Customer/advisory", // 客服中心 -> 咨询类
                    "Customer/service" // 客服中心 -> 企业服务
                ]
            };
        },
        components: {
            footerItem,
            headerItem
        },
        methods: {
            goUrl(index) {
                // if (index == 1 || index == 3 || index == 4) {
                //     this.$dialog.alert({
                //         title: '提示',
                //         message: '此功能正在开发中敬请期待~'
                //     }).then(() => {
                //         // on close
                //     });
                //     return
                // }
                if (this.routerIndex == index) {
                    return;
                }
                this.routerIndex = index;
                this.$router.replace(this.routerArr[index].routerUrl);
            }
        },
        created() {
            console.log(this.$route.query.index);
            if (this.$route.query.index) {
                this.routerIndex = this.$route.query.index;
            } else {
                this.routerIndex = 0;
            }

            this.routerArr.map((item, index) => {
                let menu = this.menuList[index];
                item.show = this.$queryMenu(menu);
            });
        }
    };
</script>

<style scoped lang="less">
    .tab-wrap {
        /*width: 100vw;*/
        /*overflow: hidden;*/
    }

    .tab-box {
        background: #fff;
        border-bottom: 0.53rem solid #f5f5f5;
        box-sizing: border-box;
        font-size: 11px;
        width: 100%;
        white-space: nowrap;
        overflow-x: auto;
        padding: 0rem 5px;

        > div {
            display: inline-block;

            > div {
                padding: 9px 16px;
                font-size: 12px;
                margin: 8px 1px;
                white-space: nowrap;
                border-radius: 5px;
                border: solid 1px #c8c8c8;
                box-sizing: border-box;
                color: #666;
                display: inline-block;
            }
        }

        .avtice-tab {
            div {
                color: #fff;
                background: #366cb3;
                border: none;
            }
        }
    }
</style>
